<template>
 <div class="back-cont">
    <div class="main-content">
        <div class="login-cont">
            <el-container>
                <el-header><h2>登录页面</h2></el-header>
                <el-main>
                    <el-space size="small" direction="vertical">
                        <el-row >
                        <el-col span="2"> <el-icon size="40" color="black"><UserFilled /></el-icon></el-col>
                        <el-col span="8"><el-input v-model="username" placeholder="请输入用户名" style="width:350px;height:40px;"></el-input></el-col>
                    </el-row>
                    <el-row style="height:40px;">
                        <el-col span="2"> <el-icon size="40" color="black"><Key /></el-icon></el-col>
                        <el-col span="8"><el-input v-model="password" type="password" placeholder="请输入密码" style="width:350px;height:40px;"></el-input></el-col>
                    </el-row>
                    <el-row style="height: 40px;display:flex" >
                        <div style="width:50px;"><text class="role_text">身份：</text></div>
                        <div style="width:30px;"></div>
                        <div>
                            <el-radio-group v-model="role">
                               <el-radio :value="0" class="my_radio" border>医生</el-radio>
                               <div style="width:30px;"></div>
                               <el-radio :value="1" class="my_radio" border>病患</el-radio>
                            </el-radio-group>
                        </div>
                    </el-row>
                    <el-row style="height: 40px;display:flex" >
                        <div style="width: 60px;"></div>
                        <el-button type="primary" @click="handlelogin" class="login_button" >登录</el-button>
                        <div style="width: 60px;"></div>
                    </el-row>     
                    <el-row style="height: 40px;">
                        <div style="width:360px;"></div>
                         <el-text type="primary" color="blue" @click="goregister">注册</el-text>
                    </el-row>
                    </el-space>
                    
                </el-main>
            </el-container>   
        </div>  
    </div>
 </div>
</template>
<script>
import { ElMessage } from 'element-plus'
import querystring from 'querystring'
export default {
    name:"login",
    data(){
    return{
      username: "",
      password: "",
      role:0,
      permission:""
    }
  },
  methods:{
    //点击登录按钮
    handlelogin(){
         this.$axios.post('http://localhost:8000/medic/login/',querystring.stringify({
            username:this.username,
            password:this.password,
            role:this.role
        })).then(res => {
            this.permission = res.data.permission
        if(this.permission=="True") {
          // sessionStorage.setItem("patient",JSON.stringify(res.data));
          // console.log(res.data)
            this.$store.state.islogin=true
            if(this.role==0){
                this.$router.push('/diagnostic')
            }
            else{
                this.$router.push('/generator')
            }
        }
        else if(this.permission=="False"){
            ElMessage({
               message: '用户名或密码错误',
               type: 'warning',
            })
        }
        else{
            ElMessage({
               message: '用户名不存在',
               type: 'warning',
            })
        }
        })
        
    },
    goregister(){
        this.$router.push('/registervue')
    }

  }
}
</script>
<style scoped>
.login_button{
    width:300px !important;
}
.role_text{
    display:block;
    height: 40px ;
    width: 50px;
}
.my_radio{
    width:120px;
    font-size: xx-large;
}
</style>